<template>
  <div class="ComplexChart">
    <div v-for="trunk in nodes" class="trunk">
      <div class="node" v-for="node in trunk" :id="node.title">{{ node.title }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import LeaderLine from 'leader-line-vue';

const tree = ref({
  title: "浙江省",
  children: [
    {
      title: "杭州市",
      children: [
        {
          title: "拱墅区",
          children: [
            {
              title: "北部软件园",
            },
          ],
        },
        {
          title: "余杭区",
          children: [
            {
              title: "梦想小镇",
            },
            {
              title: "欧美金融城B",
            },
            {
              title: "华容科技城",
            }
          ]
        }
      ]
    },
    {
      title: "宁波市",
      children: [
        {
          title: "海曙区",
          children: [
            {
              title: "疆良小镇",
            },
            {
              title: "欧美金融城A",
            },
          ],
        },
        {
          title: "江北区",
          children: [
            {
              title: "华兴小镇",
            },
            {
              title: "感电东方城",
            }
          ]
        }
      ]
    },
    {
      title: 'test1'
    },
    {
      title: 'test2'
    },
    {
      title: 'test3'
    },
    {
      title: 'test4'
    },
    {
      title: 'test5'
    },
    {
      title: 'test6'
    },
    {
      title: 'test7'
    },
    {
      title: 'test8'
    },
    {
      title: 'test9'
    },
    {
      title: 'test10'
    }
  ]
})
const nodes = ref(<any>[])
const links = ref(<any>[])

const treeToArray = (tree:any) => {
  let result:any = [];
 
  function traverse(nodes: any, level:any) {
    if (!result[level]) result[level] = []; // 初始化级别数组
    nodes.forEach((node:any) => {
      result[level].push(node); // 将节点添加到当前级别的数组
      if (node.children && node.children.length) {
        traverse(node.children, level + 1); // 递归子节点
      }
    });
  }
 
  traverse([tree], 0); // 从根节点开始递归
  return result;
}

const init = () => {
  nodes.value = treeToArray(tree.value)

  nodes.value.forEach((i:any) => {
    i.forEach((j:any) => {
      const source = j.title
      if (j.children && j.children.length) {
        j.children.forEach((k:any) => {
          links.value.push({
            source,
            target: k.title
          })
        })
      }
    })
  })

  const self:any = []

  if (links.value && links.value.length) {
    nextTick(() => {
      links.value.forEach((x:any) => {
        const start = document.getElementById(x.source)
        const end = document.getElementById(x.target)
        const line = LeaderLine.setLine(start, end, {
          path: 'magnet'
        })

        self.push(line)
      })
    })
  }

  const ComplexChart = document.querySelector('.ComplexChart')
  ComplexChart?.addEventListener('scroll', () => {
    self.forEach((s:any) => {
      s.position()
    })
  })
}

onMounted(() => {
  const body:any = document.querySelector('body')
  body.style.overflow = 'hidden'
  init()
})

onBeforeUnmount(() => {
  const body:any = document.querySelector('body')
  body.style.overflow = 'auto'
})
</script>

<style scoped lang="scss">
.ComplexChart {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  .trunk {
    width: 3000px;
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 240px;
    justify-content: center;
    .node {
      display: block;
      background-color: #252526;
      color: #fff;
      margin-right: 20px;
      width: 100px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      padding: 0 20px;
      white-space: nowrap;
    }
  }
}
</style>